<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
       .red {
         background-color: red;
       }
    </style>
  </head>
  <body>
    <ul>
      <li class="red">aa</li>
      <li>bb</li>
      <li>cc</li>
      <li>dd</li>
    </ul>
  </body>
  <script type="text/javascript">
  document.addEventListener('keyup', function(event){
    let   ul = document.querySelector('ul'),
    cur = ul.querySelector('li.red'),
    first = ul.querySelector(':first-child'),
    last =  ul.querySelector(':last-child');
    switch(event.keyCode){
      case 38:
        if(!cur.previousElementSibling){
          cur = last;
        }else{
          cur = cur.previousElementSibling;
        }
        break;
      case 40:
        if(!cur.nextElementSibling){
          cur = first;
        }else{
          cur = cur.nextElementSibling;
        }
        break;
    }
    ul.querySelectorAll('li').forEach(e => e.className = '');
    cur.className = 'red';
  });
  </script>
</html>
